<template>
  <view class="message">
    <Header></Header>
    <Card :list="list"></Card>
    <text class="loading-text">
      {{
        loadingType === 0
          ? contentText.contentdown
          : loadingType === 1
          ? contentText.contentrefresh
          : contentText.contentnomore
      }}
    </text>
  </view>
</template>

<script>
import Header from "./components/Header.vue";
import Card from "./components/Card.vue";

var page = 0;
export default {
  components: {
    Header,
    Card,
  },
  data() {
    return {
      list: null,
      loadingType: 0,
      contentText: {
        contentdown: "上拉显示更多",
        contentrefresh: "正在加载...",
        contentnomore: "没有更多数据了",
      },
    };
  },
  onShow() {
    let userInfo = uni.getStorageSync("userInfo");
    if (!userInfo) {
      page = 0;
      uni.navigateTo({
        url: "/pages/login/login",
      });
    }
    console.log(page);
    if (page == 0) {
      this.getList();
    }
  },
  onLoad() {
    console.log("load");
    this.getList();
  },
  methods: {
    /*下拉刷新*/
    onPullDownRefresh: function () {
      this.getList();
    },
    /*上拉刷新*/
    onReachBottom: function () {
      this.getMoreListInfo();
    },
    getMoreListInfo: function () {
      const that = this;
      page++;
      let userInfo = uni.getStorageSync("userInfo");
      if (that.loadingType != 0) {
        return false; //loadingType!=0;直接返回
      }
      that.loadingType = 1;
      uni.showNavigationBarLoading();
      uni.request({
        url: "http://redcrossadmin.isaw.top/api/message/GetMyMessages", //仅为示例，并非真实接口地址。
        data: {
          pageIndex: page,
          pageSize: 10,
        },
        method: "GET",
        header: {
          Authorization: userInfo.token,
          //   Authorization:
          //     "ZTlxUjIlMmIyQXZOaVh3YUtaSUNOQkNBZnNtekEyTlVuQUZrRlJDalhlb0FlMklnVkhwQU5BT2dQY1ZyTkklMmJGQTE=",
        },
        success: (res) => {
          if (res.data.code == 1) {
            if (res.data.data.length < 10) {
              that.loadingType = 2; //将loadingType归0重置
            } else {
              that.loadingType = 0;
            }
            uni.hideNavigationBarLoading(); //关闭加载动画
            that.list = that.list.concat(res.data.data);
          }
          if (res.data.code == 2) {
            uni.hideNavigationBarLoading(); //关闭加载动画
            page = 0;
            uni.navigateTo({
              url: "/pages/login/login",
            });
          }
        },
      });
    },
    getList: function () {
      const that = this;
      return new Promise((resolve) => {
        let userInfo = uni.getStorageSync("userInfo");
        page = 1;
        that.loadingType = 1;
        uni.request({
          url: "http://redcrossadmin.isaw.top/api/message/GetMyMessages", //仅为示例，并非真实接口地址。
          data: {},
          method: "GET",
          header: {
            Authorization: userInfo.token,
            // Authorization:
            //   "ZTlxUjIlMmIyQXZOaVh3YUtaSUNOQkNBZnNtekEyTlVuQUZrRlJDalhlb0FlMklnVkhwQU5BT2dQY1ZyTkklMmJGQTE=",
          },
          success: (res) => {
            if (res.data.code == 1) {
              if (res.data.data.length == 0) {
                that.loadingType = 2;
              } else {
                that.loadingType = 0;
              }
              //存储
              this.list = res.data.data;

              uni.hideNavigationBarLoading();
              uni.stopPullDownRefresh(); //得到数据后停止下拉刷新
            }
            if (res.data.code == 2) {
              uni.hideNavigationBarLoading(); //关闭加载动画
              page = 0;
              uni.navigateTo({
                url: "/pages/login/login",
              });
            }
          },
        });
      }).catch((e) => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.message {
  width: 100%;
  height: 100%;
  background: #edf0f5;
}
.loading-text {
  height: 180upx;
  line-height: 80upx;
  font-size: 25upx;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}
</style>
